<!--
 * @Description:
 * @Author 卞鹏飞 <228443632@qq.com>
 * @create 2023/1/4 22:31
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script src="./lib/index.umd.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
		  const func = async () => {
			const res = 	await Promise.all([sfutils.loadJsOrCssMulSync(['https://cdn.jsdel2ivr.net/npm/vue@2/dist/vue.js', 'https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js', 'https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js']),
        ])
				console.log('res', res)
      }
			func()
    </script>

    <div id="app">
      {{ message }}

      <input v-model="input"></input>

      <input name="familyIllness" id="wu" type="radio" value="1">
      <br>
      <div style="height: calc(100vh - 100px); overflow-y: auto;background: #eee; padding: 0 12px;">
        <pre>{{json}}</pre>
      </div>
    </div>


    <script>

      const tree = [
        {
          id: 1,
          name: '香蕉',
          pId: null,
          children: [
            {
              id: 1001,
              name: '香蕉A@',
              pId: 1,
              children: [
                {
                  id: 1001001,
                  name: '香蕉A-儿子',
                  pId: 1001,
                  children: [
                    {
                      id: 1001001001,
                      name: '香蕉A-儿子-儿子',
                      pId: 1001001
                    }
                  ]
                }
              ]
            },
            {
              id: 1002,
              name: '香蕉B',
              pId: 1,
              children: [
                {
                  id: 1002002,
                  name: '香蕉B-儿子',
                  pId: 1002
                }
              ]
            },
            {
              id: 1003,
              name: '香蕉C',
              pId: 1,
              children: [
                {
                  id: 1003003,
                  name: '香蕉C-儿子',
                  pId: 1003
                }
              ]
            }
          ]
        },
        {
          id: 2,
          name: '苹果',
          pId: null,
          children: [
            {
              id: 1004,
              name: '苹果A',
              pId: 2,
              children: [
                {
                  id: 1004004,
                  name: '苹果A-儿子',
                  pId: 1004
                }
              ]
            },
            {
              id: 1007,
              name: '苹果D',
              pId: 2
            },
            {
              id: 1008,
              name: '苹果D',
              pId: 2
            },
            {
              id: 1009,
              name: '苹果C',
              pId: 2
            }
          ]
        },
        {
          id: 3,
          name: '橘子',
          pId: null,
          children: [
            {
              id: 1005,
              name: '橘子C',
              pId: 3,
              children: [
                {
                  id: 1005005,
                  name: '橘子C-儿子',
                  pId: 1005
                }
              ]
            },
            {
              id: 1006,
              name: '橘子B',
              pId: 3,
              children: [
                {
                  id: 1006006,
                  name: '橘子B-儿子',
                  pId: 1006
                }
              ]
            },
            {
              id: 1010,
              name: '橘子A',
              pId: 3
            }
          ]
        },
        {
          id: 4,
          name: '西瓜',
          pId: null,
          children: [
            {
              id: 1012,
              name: '西瓜B',
              pId: 4,
              children: [
                {
                  id: 1013,
                  name: '西瓜B-儿子',
                  pId: 1012
                }
              ]
            }
          ]
        },
        {
          id: 1011,
          name: '西瓜A',
          pId: null
        }
      ]

      const data  =  [{
        id: 1,
        label: '一级 76666',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }]

      // const treeData = sfutils.deepClone(data)

      var app = new Vue({
        el: '#app',
        data: {
          message: '香蕉A@',
          input: '',
          json: sfutils.deepClone(data)
        },
        mounted() {

        },

        watch: {
          input(newVal) {
            if (!newVal) {
              this.json = data
              return
            }
            this.json = filterTree({
              tree: data,
              retainChild: true,
              callbackItem: (...args) => {
                const [item] = args
                // console.log('')
                // console.log('callbackItem', args)
                return item.label.includes(newVal)
              }
            })
          }
        }
      })

      const { filterTree } = sfutils


			console.log(sfutils.getSize({id: 1, name: 2})) // {id: '123', name: 'test1'}); // id=123&name=test1
    </script>

  </body>
</html>
